<template>
	<view class="price-item flex" 
		:class="{'current': isCurrent, 'flex-column center': displayStyle == 'row'}"
	>
		<block v-if="displayStyle == 'column'">
			<view class="time">{{ displayTime }}</view>
			<view class="flex flex-between" style="width: 100%;">
				<text class="label">当前价格</text>
				<view class="price flex">
					<text class="symbol">¥</text>
					<text class="value">{{ price.total }}</text>
					<text class="unit">/度</text>
				</view>
			</view>
		</block>
		
		<block v-else>
			<view class="time">{{ price.displayTime }}</view>
			<view class="price flex">
				<text class="symbol">¥</text>
				<text class="value">{{ price.total }}</text>
				<text class="unit">/度</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			price: {
				type: Object,
				required: true
			},
			displayTime: {
				type: String,
				required: true
			},
			isCurrent: {
				type: Boolean,
				default: false
			},
			displayStyle: {
				type: String,
				default: 'column'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.price-item {
		border-radius: 10rpx;
		height: 126rpx;
		background: #F6FAFF url(~@/static/home/detail/price-box.png) no-repeat;
		background-size: auto 100%;
		position: relative;
		align-items: center;
		width: calc(100vw / 2 - 110rpx);
		padding: 0 30rpx;
		
		&:first-child {
			margin-right: 20rpx;
		}
		
		&.center {
			justify-content: center;
		}

		.label {
			font-weight: 400;
			font-size: 24rpx;
			color: #777;
			flex: 1;
		}

		.time {
			flex: 1;
			font-size: 17rpx;
			color: #fff;
			font-weight: 400;
			font-family: "PINGFANG";
			width: 100%;
			position: absolute;
			left: 10rpx;
			top: 2rpx;
		}

		.price {
			align-items: baseline;
			justify-content: center;

			.symbol {
				font-size: 32rpx;
				color: #FC0A01;
				font-family: "PINGFANG";
				font-weight: 400;
			}

			.value {
				font-size: 44rpx;
				color: #FC0A01;
				font-family: "PINGFANG";
				font-weight: 600;
				margin: 0 5rpx;
			}

			.unit {
				font-size: 24rpx;
				color: #333;
				font-family: "PINGFANG";
			}
		}
	}
</style>